@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <!-- 统计卡片 -->
        <div class="col-md-3">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">材料总数</h5>
                    <h2 class="card-text">{{ $totalMaterials }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">类型总数</h5>
                    <h2 class="card-text">{{ $totalTypes }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">库存预警</h5>
                    <h2 class="card-text">{{ $lowStockCount }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white mb-4">
                <div class="card-body">
                    <h5 class="card-title">今日操作</h5>
                    <h2 class="card-text">{{ $todayOperations }}</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 库存趋势图 -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">库存趋势</h5>
                </div>
                <div class="card-body">
                    <canvas id="stockTrendChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 类型分布图 -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">类型分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="typeDistributionChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近操作记录 -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">最近操作记录</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>用户</th>
                            <th>操作</th>
                            <th>目标</th>
                            <th>内容</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentLogs as $log)
                        <tr>
                            <td>{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                            <td>{{ $log->username ?? '已删除用户' }}</td>
                            <td>{{ $log->action_text }}</td>
                            <td>{{ $log->target_type_text }}</td>
                            <td>{{ $log->content }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{asset('/js/chart.min.css')}}"></script>
<script>
// 库存趋势图
const stockTrendCtx = document.getElementById('stockTrendChart').getContext('2d');
new Chart(stockTrendCtx, {
    type: 'line',
    data: {
        labels: @json($stockTrend['labels']),
        datasets: [{
            label: '库存总量',
            data: @json($stockTrend['data']),
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// 类型分布图
const typeDistributionCtx = document.getElementById('typeDistributionChart').getContext('2d');
new Chart(typeDistributionCtx, {
    type: 'pie',
    data: {
        labels: @json($typeDistribution['labels']),
        datasets: [{
            data: @json($typeDistribution['data']),
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(153, 102, 255)'
            ]
        }]
    },
    options: {
        responsive: true
    }
});
</script>
@endpush
@endsection
